<!-- 
* @desc:分槽管理任务列表查询组件
* @fileName:TaskDetailsSearch.vue
* @author:chenxiaofeng@yzbdl.ac.cn
* @date:2022-06-01
!-->
<script lang="ts" setup>
import { reactive } from "vue";
import { Search } from "@element-plus/icons-vue";
const searchData = reactive({
  time:"",
  status:"",
  type:"",
  logLevel:"",
  taskName:""
})

const statusOptions = [
  {label:"启用",value:"1"},
  {label:"禁用",value:"2"}
]

const typeOptions = [
  {label:"作业",value:"1"},
  {label:"转换",value:"2"}
]

const logLevelOptions = [
  {label:"基本",value:"1"},
  {label:"详细",value:"2"}
]
</script>

<template>
  <div class="page-search">
    <!-- 时间范围 -->
    <div>
      <el-date-picker
        v-model="searchData.time"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD HH:mm:ss"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
    </div>
    <el-select
      class="page-search-eventChoose"
      v-model="searchData.status"
      placeholder="请选择状态"
      clearable
      size="large"
    >
      <el-option
        v-for="item in statusOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-select
      class="page-search-eventChoose"
      v-model="searchData.type"
      placeholder="请选择类型"
      clearable
      size="large"
    >
      <el-option
        v-for="item in typeOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-select
      class="page-search-eventChoose"
      v-model="searchData.logLevel"
      placeholder="请选择日志等级"
      clearable
      size="large"
    >
      <el-option
        v-for="item in logLevelOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-input
      class="page-search-userInput"
      v-model="searchData.taskName"
      clearable
      :suffix-icon="Search"
      placeholder="请输入任务名称"
    ></el-input>
    <el-button :icon="Search"
      >查询</el-button
    >
  </div>
</template>

<style lang="scss" scoped>
.page-search {
  padding: 15px;
  margin-bottom: 15px;
  display: flex;
  justify-content: end;

  :deep(.el-input__wrapper) {
    height: 30px;
    border-radius: 0;
    background-color: #f2f2f6 !important;
    box-shadow: unset !important;
  }
  :deep(.el-date-editor--daterange) {
    border-radius: 0;
    background-color: #f2f2f6 !important;
    box-shadow: unset !important;
  }
  .page-search-userInput,
  .page-search-eventChoose {
    width: 140px;
    margin-left: 10px;
  }
  .el-input {
    margin-right: 10px;
  }
  .el-button {
    margin-left: 10px;
    width: 70px;
    height: 30px;
    border-radius: 0;
    background-color: #f2f2f6;
    color: #000;
    border: 0;
    &:hover {
      background-color: #5473e6;
      color: #fff;
    }
  }
}
</style>
